<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>洗衣店管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static//css/login.css"/>
    <link rel="stylesheet" href="/static//font-awesome-4.7.0/css/font-awesome.min.css"/>
    <script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
</head>

<body>
<div class="container-fluid">
    <div class="row" style="width: 100%;height: 100%;">
        <div class="right col-md-offset-8 col-md-4 col-sm-offset-8 col-sm-4">
            <span class="sp"></span><br/>
            <span>管理员登录</span><br/>
            <form class="fo">
                <div class="form-group">
                    <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
                    <i class="fa fa-user"></i>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
                    <i class="fa fa-lock"></i>
                    <a class="reset" onclick="openModal()"><i class="fa fa-question-circle"
                                                                                          title="修改密码"></i></a>
                </div>
                <div class="form-group" style="margin-top: -50px">
                    <div class="main-checkbox">
                        <input type="checkbox" name="rememberMe" id="remember" checked="checked"/>
                        <label for="remember"></label>
                        <span id="txt">记住我</span>
                        <span id="info"></span>
                    </div>
                </div>
                <div class="form-group">
                    <input type="button" id="btn" class="form-control btn btn-primary" value="登录"
                           style="padding-left: 0px;"/>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 修改密码模态框（Modal） -->
<div class="modal fade" id="updatePassword" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true" style="margin-top: 20px;">
    <div class="modal-dialog" style="width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">修改密码</h4>
            </div>
            <div class="modal-body">
                <form class="fo" id="update" style="padding:0 50px;">
                    <div class="form-group">
                        <input type="text" class="form-control" name="user" id="user" placeholder="请输入账号">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" name="passOld" id="passOld" placeholder="请输入原密码">
                        <i class="fa fa-lock"></i>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" name="passNew" id="passNew" placeholder="请输入新密码">
                        <i class="fa fa-lock"></i>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" name="passNewOk" id="passNewOk"
                               placeholder="请确认新密码">
                        <i class="fa fa-lock"></i>
                        <span id="upInfo"></span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="updateBtn" type="button" class="btn btn-primary" >确认修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script type="text/javascript">
    $(function () {

        //cookie
        if ($.cookie("remember") == "true") {
            $("#remember").attr("checked", true);
            $("#username").val($.cookie("username"));
            $("#password").val($.cookie("password"));
        }
        ;

        //登录
        $("#btn").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();

            if (username == '' || password == '') {
                $("#info").text('账号或密码不能为空!');
            } else {
                $("#info").text('');

                var operatorInfo = {
                    username: username,
                    password: password,
                };

                $.ajax({
                    async: false,
                    type: "post",
                    url: "/user/subLogin",
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(operatorInfo),
                    success: function (data) {
                        if (data.code == 1) {
                            Save();
                            window.location.href = "/main/show";
                        } else {
                            $("#info").text('账号或密码错误!');
                            $("#password").val('');
                        }
                    }
                });

            }
        });

        $(".modal-body input").keyup(function () {


            if ($("#passNew").val() != $("#passNewOk").val()) {
                $("#upInfo").text('两次密码不同!').css('color','red');
                $("#updateBtn").attr("disabled", true);
            } else {
                $("#upInfo").text('');
                $("#updateBtn").attr("disabled", false);
            }

        });

        $(".reset").click(function () {
            $("#upInfo").text('');
            $("#user").val('');
            $("#passOld").val('');
            $("#passNew").val('');
            $("#passNewOk").val('');
        })

        //修改密码
        $("#updateBtn").click(function () {

            var user = $("#user").val();
            var passOld = $("#passOld").val();
            var passNew = $("#passNew").val();
            var passNewOk = $("#passNewOk").val();

            var operatorMsg = {
                user: user,
                passOld: passOld,
                passNew: passNew,
                passNewOk: passNewOk,
            };

            if ($("#upInfo").text() == '') {

                var msg = '请确认是否修改?\n\n请确认！';
                if (confirm(msg) == true) {

                    $.ajax({
                        async: false,
                        type: "post",
                        url: "/user/update",
                        dataType: "json",
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify(operatorMsg),
                        success: function (data) {
                            console.log(data)
                            if (data.code == 1) {
                                $("#upInfo").text('修改成功!').css('color','green');
                            } else if(data.code == -1){
                                $("#upInfo").text('账号或密码为空!').css('color','red');
                            } else {
                                $("#upInfo").text('账号或原密码错误!').css('color','red');
                            }
                        }
                    });

                } else{
                    return false;
                }
            }

        });

        //记住用户名密码
        function Save() {
            if ($("#remember").is(":checked")) {
                var str_username = $("#username").val();
                var str_password = $("#password").val();
                $.cookie("remember", "true", {expires: 7}); //存储一个带7天期限的cookie
                $.cookie("username", str_username, {expires: 7});
                $.cookie("password", str_password, {expires: 7});
            }
            else {
                $.cookie("remember", "false", {expire: -1});
                $.cookie("username", "", {expires: -1});
                $.cookie("password", "", {expires: -1});
            }
        };


    });

    function openModal(){
        $("#updatePassword").modal({backdrop: 'static', keyboard: false});  //手动开启
    }
</script>
</html>